body {
  background-color: #eee9e9;
  background-image: url("/images/background\ pattern.png");
  background-size:30px;
  color:#464646;
  font-family:inter;
  height:100vh;
}

.main {
  z-index:1;
  position:relative;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  max-width:60vw;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}

@font-face {
    font-family: 'inter'; /*a name to be used later*/
    src: url(/fonts/Inter-VariableFont_slnt\,wght.ttf); /*URL to font*/
}

a {
  color:#ffc5c5;
  text-decoration:none;
}

.accs a {
  color:#464646;
  position:relative;
  transition:0.2s ease;
}

.accs a:hover {
  color:#f7b4b4;
  transform: translateY(-5px);
}

h1 {
  font-weight:800;
  letter-spacing:4px;
}

.title {
  position:relative;
  top:-20px;
  z-index:999;
  text-shadow: -2px -2px 0 #ffffff, 2px -2px 0 #ffffff,
          -2px 2px 0 #ffffff, 2px 2px 0 #ffffff;
  margin:0px;
}

.under-title {
  margin-top:-13px;
}

.header {
  width:100%;
  height:100%;
}

.lace-border {
  border-style:solid;
  border-width:7px;
  border-image:url(/images/border.png) 7 fill round;
}

.info {
  text-align:justify;
}

h2 {
  margin:0px;
  font-weight:700;
  font-size:23px;
}

p, ul, li {
  font-weight:500;
  font-size:14px;
  margin:0px;
}
.comm-row {
  display: flex;
  flex-wrap: nowrap;        /* lets them wrap on smaller screens */
  width:100%;
  gap: clamp(0.5rem, 2vw, 2rem);
}

.price-info {
  flex: 1 1 250px;        /* grow, shrink, min width */
  max-width: 100%;         /* cap at 3 per row on big screens */
  box-sizing: border-box;
}

.btn {
    font-size:13px;
    font-weight:600;
    color:white;
}

.btn:hover {
    background-color:#fce1e1;
    color:#f7b4b4;
}

.comm-preview {
  width: 100%;          /* take full container width */
  aspect-ratio: 1 / 1;  /* square */
  object-fit: cover;    /* crop if not square */
  display: block;
}

/* When screen is <= 768px (Bootstrap's "md" breakpoint), stack them */
@media (max-width: 600px) {

  .price-info {
    width: 80%;       /* full width in column layout */
    max-width: 400px;  /* optional, prevent them from being too huge */
  }
}

@media (max-width: 800px) {

    .main {
        max-width:95%;
    }

  .main-layout {
    flex-direction: column; /* stack */
  }

  .sidebar {
    flex: none;
    width: 100%;          /* full width */
    display: flex;
    justify-content: center;
  }
  .sidebar h2 {
    display:none;
  }

  .sidebar ul {
    display: flex;
    gap: 5px;           /* spacing between menu items */
  }

  .sidebar li {
    margin: 0;           /* remove vertical spacing */
  }
}


.buttons {
    display:flex;
    justify-content:space-between;
    margin-top:5px;
    margin-bottom:5px;
    gap:5px;
}

.btn {
    background:#f7b4b4;
    border-radius:0px;
    padding:2px;
    display:flex;
    width:50%;
    justify-content:space-around;
    overflow-x:clip;
    text-overflow:ellipsis
}

.price {
    display:flex;
    justify-content:space-between;
}

.separate {
  flex: 1 1 10px;
  border-bottom: #7b7b7b solid 1px;
  height: 0%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  margin-right: 10px;
  opacity: 0.3;
}

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0; /* shorthand for top/left/right/bottom:0 */
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

/* The image inside */
.lightbox-content {
  max-width: 90%;
  max-height: 80%;
  box-shadow: 0 0 15px rgba(0,0,0,0.8);
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

.sidebar {
  flex: 0 0 30px; /* fixed width */
  position:sticky;
  top:0;
  background:white;
  z-index:2;
  margin-right:20px;
}

.sidebar h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 8px 0;
}

.sidebar a {
  text-decoration: none;
  transition: color 0.5s ease;
}

.sidebar a:hover {
  color: #f78181;
}

.main-layout {
    display:flex;
    max-height:60vh;
    overflow-y:scroll;
    overflow-x:hidden;
}

.comm-content {
    display:block;
}

/* hide all tabs by default */
.tab-content {
  display: none;
}

/* show the active one */
.tab-content.active {
  display: flex;
}

.price-info h1, .half-h1, h2 {
    font-size:20px;
    letter-spacing:0.5px;
    color:#fff;
  -webkit-text-stroke: 1px #f7b4b4;
  text-shadow: 
        -1px -1px 0 #f7b4b4,  
        1px -1px 0 #f7b4b4,
        -1px 1px 0 #f7b4b4,
        1px 1px 0 #f7b4b4;
}

::selection {
  color:#fff;
  -webkit-text-stroke: 1px #f7b4b4;
  text-shadow: 
        -1px -1px 0 #f7b4b4,  
        1px -1px 0 #f7b4b4,
        -1px 1px 0 #f7b4b4,
        1px 1px 0 #f7b4b4;
  }

.custom-info img {
    width: 100%;          /* take full container width */
    aspect-ratio: 1 / 1;  /* square */
    object-fit: cover;    /* crop if not square */
}

.custom-info {
  display: flex;
  width: 100%;      /* full width of parent */
}

.half {
  flex: 1;          /* each child takes up half */
  display: flex;    /* lets you center/align content */
  overflow: hidden; /* keeps oversized images from spilling */
  margin:10px;
}

/* make sure the image scales properly */
.image-side img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;  /* crop/fill instead of stretching */
}

.text-side {
    display:block;
}

/* nsfw */

/* Modal base */
.modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 2000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* Modal content */
.modal-content {
  padding: 20px 30px;
  border-radius: 10px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  border-style:solid;
  border-width:7px;
  border-image:url(/images/border.png) 7 fill round;
}

.modal-content button {
  width: 100%;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content p {
    text-align:justify;
    text-align-last:center;
}

/* NSFW blur/overlay */
.nsfw-img {
  filter: blur(12px);
  transition: filter 0.3s ease;
  pointer-events: none;
}

.nsfw-wrapper {
  position: relative;
  display: inline-block;
}

.nsfw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.nsfw-wrapper.revealed .nsfw-img {
  filter: none;
  pointer-events: auto;
}

.nsfw-wrapper.revealed .nsfw-overlay {
  opacity: 0;
  pointer-events: none;
}

.muted {
    font-size:10px;
    opacity:0.5;
    align-content:center;
}

.payment-options {
    font-size:25px;
    display:flex;
    justify-content:space-around;
}

hr {
    margin-top:5px;
    margin-bottom:10px;
}

.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-img {
  display: none;
  width: 100%;
  height: auto;
  cursor: pointer;
  object-fit: cover;
}

.carousel-img.active {
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}

.carousel-btn.prev {
  left: 5px;
}

.carousel-btn.next {
  right: 5px;
}